.num{
    color: red;
}
.top {
    width: 100%;
    height: 180rpx;
    background-image: var(--gradualBlue);
}

.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14%;
    width: 100%;
    padding: 0 25rpx;
    background-color: #fff;
    .price {
        display: flex;
        flex: 7;
        .preferential {
            text {
                font-size: 30rpx;
            }
        }
        .collect {
            margin-left: 25rpx;
            text {
                font-size: 30rpx;
            }
        }
    }
    .collect_btn {
        flex: 3;
        button {
            background-color: #58b89c;
            color: #fff;
            width: 100%;
        }
    }
}
.main{
    position: fixed;
    width: 90%;
    left: 50%;
    height: 74.5%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 6px 6px 20px #888888;
    padding: 0 25rpx;
    font-size: 35rpx;
    .pay{
        font-weight: bold;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #ccc;
    }
    .percentage{
        display: flex;
        justify-content:space-between;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #ccc;
        .percentage_l{
            font-weight: bold;
        }
        .percentage_r{
            color: #78ddb8;
        }
    }
    .mode{
        padding: 30rpx 0;
        border-bottom: 1rpx solid #ccc;
        .mode_name{
            font-weight: bold;
            display: flex;
            justify-content:space-between;
            text{
                margin-right: 20rpx;
            }
        }
        .mode_list{
            display: flex;
            width: 100%;
            .list{
               
                padding: 30rpx 0  0 0;
                flex:1;
                display: flex;
                justify-content:center;
                flex-wrap:wrap;
                .list_img{
                    position: relative;
                    width: 100rpx;
                    height: 100rpx;
                    display: flex;
                justify-content:center;
                align-items:center;
                    border-radius: 10rpx;
                    image{
                        width: 60%;
                    }
                    .custom{
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        font-size: 40rpx;
                        color: #58b89c;
                        transform: translate(60%,50%);
                    }
                }
                .mode_image_title{
                   margin-top: 32rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #63c0a8;
                }
            }
        }
    }
    .collect{
        display: flex;
        justify-content:space-between;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #ccc;
        .collect_money{
            .collect_money_title{
                font-weight: bold;
                margin-right: 25rpx;
            }
            .collect_money_num{
                padding: 15rpx 40rpx;
                border: 1rpx solid #8b8b8b;
                border-radius: 20rpx;
                color: #ea5b51;
            }
        }
        .comments_change{
            color: #ea5b51;
        }
    }
    .remark{
        padding: 30rpx 0;
        border-bottom: 1rpx solid #ccc;
        display: flex;
        justify-content:space-between;
        align-items:center;
        .remark_name{
            font-weight: bold;
        }
        .remark_input{
            width: 80%;
            padding:15rpx 10rpx;
            border-radius: 20rpx;
            border: 1rpx solid #8b8b8b;
            text-align: center;
        }
    }
}